<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    ul{
        text-align: left;
        margin-left: 10px;
        list-style-type: none;
    }
    body{
        text-align: center;
    }
    #show, #bottom{
        width: 600px;
        background-color: azure;
        padding: 15px
    }
    #show{
        height: 400px;
    }
    #bottom{
        height: 30px;
    }
    input{
        width: 520px;
    }
</style>
<body>
<div id="show">
    <ul>

    </ul>
</div>
<div id="bottom">
    <input id="text"><button id="submit">发送</button>
</div>
</body>
<script src="/static/js/jquery-2.0.3.min.js"></script>
<!--<script type="text/javascript" src="//code.jquery.com/jquery-1.7.1.min.js"></script>-->
<!--<script type="text/javascript" src="//cdn.bootcss.com/socket.io/1.5.1/socket.io.min.js"></script>-->
<script src="/static/js/socket.io/socket.io.js"></script>
<script type="text/javascript" charset="utf-8">
    $(function(){
        var url =  "";
        if(document.domain.indexOf("192.168")!=0 && document.domain.indexOf("local")!=0){
            url =  url + "https://";
        }
        url =  url + document.domain;
        if(location.port!=""){
            url =  url + ':' + location.port;
        }

        console.log(url);
        var io_client = io.connect(url);
        io_client.on('connect', function() {
            // 连接成功时的事件
            io_client.emit('login', {data: 'I\'m connected!'});
        });

        io_client.on("mes", function(resp){
            // 绑定的事件, 对应py文件中的event参数的值
            $("#show ul").append(`<li>${resp}</li>`);
        });

        // 发送按钮事件
        $("#submit").click(function(){
            var text = $.trim($("#text").val());
            if(text == ""){
                // nothing...
            }
            else{
                $.post("/listen", {"data": text}, function(resp){
                    var resp = JSON.parse(resp);
                    var status = resp['message'];
                    if(status == "success"){
                        $("#text").val("");  // 清空输入内容
                    }
                    else{
                        alert(status);
                    }
                });
            }
        });
    });
</script>
</html>